<template>
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <div class="welcome-section">
      <div class="welcome-info">
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <div class="welcome-text">
          <h2>{{ greeting }}，超级管理员！</h2>
          <p>欢迎使用Vue3 Element Admin管理系统</p>
        </div>
      </div>
      <div class="current-time">
        <span>{{ currentTime }}</span>
      </div>
    </div>

    <!-- 基础统计卡片 -->
    <div class="stats-row">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">用户总数</div>
            <div class="stat-number">{{ userCount }}</div>
          </div>
          <div class="stat-icon user-icon">
            <el-icon><User /></el-icon>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">今日访问</div>
            <div class="stat-number">{{ todayVisits }}</div>
          </div>
          <div class="stat-icon visit-icon">
            <el-icon><View /></el-icon>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">系统状态</div>
            <div class="stat-number">正常</div>
          </div>
          <div class="stat-icon status-icon">
            <el-icon><CircleCheck /></el-icon>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">在线用户</div>
            <div class="stat-number">{{ onlineUsers }}</div>
          </div>
          <div class="stat-icon online-icon">
            <el-icon><Connection /></el-icon>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快捷操作 -->
    <div class="quick-actions">
      <el-card>
        <template #header>
          <span>快捷操作</span>
        </template>
        <div class="action-buttons">
          <el-button type="primary" @click="goToUserManagement">
            <el-icon><User /></el-icon>
            用户管理
          </el-button>
          <el-button type="success">
            <el-icon><Setting /></el-icon>
            系统设置
          </el-button>
          <el-button type="warning">
            <el-icon><Document /></el-icon>
            数据导出
          </el-button>
          <el-button type="info">
            <el-icon><Monitor /></el-icon>
            系统监控
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="DashboardPage">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  View,
  CircleCheck,
  Connection,
  Setting,
  Document,
  Monitor
} from '@element-plus/icons-vue'

const router = useRouter()

// 基础统计数据
const userCount = ref(156)
const todayVisits = ref(89)
const onlineUsers = ref(12)

// 当前时间
const currentTime = ref('')

// 问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 12) return '上午好'
  if (hour < 18) return '下午好'
  return '晚上好'
})

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN')
}

// 跳转到用户管理
const goToUserManagement = () => {
  router.push('/system/user')
}

onMounted(() => {
  updateTime()
  // 每秒更新时间
  const timer = setInterval(updateTime, 1000)

  // 存储定时器ID以便清理
  onUnmounted(() => {
    clearInterval(timer)
  })
})
</script>

<style scoped>
.dashboard-container {
  padding: 0;
}

/* 欢迎区域 */
.welcome-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.welcome-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.welcome-text h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #333;
}

.welcome-text p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.current-time {
  color: #666;
  font-size: 14px;
}

/* 统计卡片 */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.visit-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.status-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.online-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* 快捷操作 */
.quick-actions {
  margin-bottom: 24px;
}

.quick-actions .el-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.action-buttons .el-button {
  height: 48px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .stats-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .action-buttons {
    grid-template-columns: 1fr;
  }
}
</style>
